<template>
  <el-card>
    <div slot="header">模型介绍</div>
    <div>
      <section>
        <template>
          <div>
            <el-carousel height="200px" type="card" :autoplay="false">
              <el-carousel-item v-for="item in 4" :key="item">
                <h3 text="2xl" justify="center">{{ item }}</h3>
              </el-carousel-item>
            </el-carousel>
          </div>
        </template>
      </section>
    </div>
    <div>
      <el-upload
        class="upload-demo"
        ref="upload"
        drag
        action="http://localhost:8181/upload"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :file-list="fileList"
        :on-change="
          (file, fileList) => {
            handleChange(file, fileList);
          }
        "
        list-type="picture"
        multiple
        :auto-upload="false"
        :data="{ deid: 1, diid: 2, date: '2012-2-2' }"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">
          只能上传jpg/png文件，且不超过500kb
        </div>
      </el-upload>
      <el-button
        style="margin-left: 10px"
        size="small"
        type="success"
        @click="submitUpload"
        >上传到服务器</el-button
      >
      <div>{{ this.fileList }}</div>
    </div>
  </el-card>
</template>
  </section>
</template>

<script>
export default {
  data() {
    return {
      fileList: [],
    };
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    submitUpload() {
      console.log(this.$refs.upload);
      this.$refs.upload.submit();
    },
    handleChange(file, fileList, listName) {
      this.fileList = fileList;
      console.log("fileList", this.fileList);
      listName = fileList;
      return listName;
    },
  },
};
</script>

<style scoped>
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>